﻿@using ResponsiveChart.Data
@implements IDisposable

@code {
    TelerikChart ChartRef { get; set; } // you need references to the charts you need to resize

    protected override void OnInitialized()
    {
        WindowResizeDispatcher.WindowResize += ResizeChart;
    }

    public void Dispose()
    {
        WindowResizeDispatcher.WindowResize -= ResizeChart;
    }

    protected async Task ResizeChart()
    {
        // now that you know the size of the chart container changed, re-render the chart
        ChartRef.Refresh(); 
        
        //you can do this for more than one chart if the component has more than one chart

        //current browser dimensions are stored in the static class as well for easy retrieval
        //this example sets them only after a resize has occurred, you can invoke a JS method to
        //get them upon initialization as well (e.g., in the constructor of the dispatcher class)
        //WindowResizeDispatcher.WindowWidth
        //WindowResizeDispatcher.WindowHeight
        //if you use these values in the markup, call StateHasChanged(), this is not raised by an EventCallback
        //StateHasChanged();
    }





    //sample data for the chart follows here
    public class MyDataModel
    {
        public int SecondSeriesValue { get; set; }
        public string ExtraData { get; set; }
    }

    public List<MyDataModel> modelData = new List<MyDataModel>() {
        new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
        new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
        new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
        new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
     };

    public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };

    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

<TelerikChart @ref="@ChartRef">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@simpleData">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
            <ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartValueAxes>
        <ChartValueAxis Color="red"></ChartValueAxis>
    </ChartValueAxes>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly sales trend"></ChartTitle>

    <ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
    </ChartLegend>
</TelerikChart>


